<template>
  <div class="wbsManage pageContent">
    <pageContent>
      <template v-slot:box-content>
        <div style="margin: 12px 15px 8px 15px;">
          <div style="font-size:15px;margin-bottom:15px" class="flexBetween">
            <div style="font-size:18px;font-weight:bold;color: #202d40;">WBS管理</div>
          </div>
          <a-spin :spinning="treeLoading">
            <div class="leftDiv">
              <div style="width:100%;margin:0 auto">
              <a-select
                v-if="defaultUnitFlag"
                :default-value="defaultUnit"
                style="width: 100%"
                @change="selectUnitChange"
              >
                <a-select-option
                  :value="item.id"
                  v-for="item in unitList"
                  :key="item.id"
                >{{item.tenderCode}}</a-select-option>
              </a-select>
            </div>
            <!-- <treeNoSelect /> -->

            <div class="treeDiv">
              <!-- <treePromiss /> -->
              <treePromiss
                v-if="!treeLoading"
                :treeData="treeData"
                :defaultSelectKeys="defaultSelectKeys"
                :default-expand-all="false"
                @treeKey="treeKey"
              />
            </div>
            </div>
            
          </a-spin>
        </div>
        <div
          class="blueWord"
          @click="onAdd"
          style="text-align:center; border-top: 1px solid #f0f0f0;height:49px;line-height:49px"
        >清单配置</div>
      </template>
      <template v-slot:right-content style="position:relative">
        <div class="flexBetweenCenter" style="margin-bottom:8px">
          <div class="rightTitle">构件列表</div>
          <div style="margin-right:40px">
            <a-button type="primary" @click="onAdd">新增</a-button>
          </div>
        </div>
        <div class="selectDiv flexStartCenter">
          <a-input-search
            placeholder="名称"
            style="width: 140px;margin-right:40px"
            @search="selectSearch"
            @change='searchChange'
          />
           <!-- @click="e => e.preventDefault()" -->
          <!-- <div class="flexStartCenter dropdownClass">
            <div class="selectType">工程类型</div>
            <a-dropdown style="width:60px;display: inline-block;text-align: right;cursor: pointer;">
             
              <span class="ant-dropdown-link">
                {{dropName}}
                <a-icon type="down" />
              </span> 
              <a-menu slot="overlay">
                <a-menu-item v-for="item in typeData" :key="item.id">
                  <span @click="clickDrop(item.name)">{{item.name}}</span>
                </a-menu-item>
              </a-menu>
            </a-dropdown>
          </div> -->
        </div>
        <div class="selectDivBottom"></div>
        <div class="tableDiv">
          <a-spin :spinning="tableLoading">
            <vxeTableCom
              :tableData="tableData"
              :loading="loading"
              detailName
              tableTitle="wbs管理"
              @tableDetail="tableDetail"
            ></vxeTableCom>
          </a-spin>
        </div>
        <div style="position:absolute;bottom:0;width:calc(100% - 540px);">
          <vxePage style="width:100%" :pageData="pageData" @pageChange="pageChange" />
        </div>
      </template>
    </pageContent>

    <!-- 详情 -->
    <div class="tableDrawer">
      <tableDrawer :visibleDrawer="visibleDrawer" :title="drawerTitle" @onClose="onClose">
        <wbsDetail />
      </tableDrawer>
    </div>
  </div>
</template>

<script>
// import treeNoSelect from '@/components/tree/treeNoSelect'
import treePromiss from '@/components/tree/treePromiss'
// import selectOpen from '@/components/select/selectOpen'
import vxePage from '@/components/vxePage/index'
import tableDrawer from '@/components/drawer/tableDrawer'
import wbsDetail from './wbsDetail/index'
import vxeTableCom from '@/components/vxeTable/index'
import pageContent from '@/components/pageContent/index'
import { wbsTreeByOrgId, pagingQueryByWbs } from '@/api/wbsManage.js'
import { getManageByUserId } from '@/api/listDirectorySet.js'
import XEUtils from 'xe-utils'
let tableData = []
let tableColumns = []
export default {
  name: 'wbsManage',
  components: {
    // treeNoSelect,
    // selectOpen,
    // tablePage,
    tableDrawer,
    wbsDetail,
    vxeTableCom,
    treePromiss,
    pageContent,
    vxePage
  },
  data() {
    return {
      tableData,
      tableColumns,
      pageData: {
        currentPage: 1,
        pageSize: 10,
        totalResult: 20
      },
      loading: false,
      visibleDrawer: false,
      drawerTitle: '详情',
      dropName: '全部',
      typeData: [
        { id: 1, name: '全部' },
        { id: 2, name: '发动机' },
        { id: 3, name: '变速箱' },
        { id: 4, name: '方向盘' },
        { id: 5, name: '灯' }
      ],
      treeLoading: true,
      tableLoading: true,
      orgId: '',
      treeData: [],
      defaultSelectKeys: [],
      expandFlag: false,
      frontWbsId: '',

      unitList: [],
      defaultUnit: [],
      unitTreeData: [],
      defaultUnitFlag: false,
      likeEbsName: ''
    }
  },
  mounted() {
    this.getUnitList()
    // this.getTree()
  },
  methods: {
    //新增
    onAdd() {
      this.$message.destroy()
      this.$message.warning('请通过BIM协同平台配置')
    },
    getTable() {
      this.tableLoading = true
      let data = {
        orgId: this.orgId,
        frontWbsId: this.frontWbsId,
        likeEbsName: this.likeEbsName,
        page: this.pageData.currentPage,
        size: this.pageData.pageSize
      }
      pagingQueryByWbs(data).then((res) => {
        if (res.code == 200) {
          this.tableData = res.data
          this.pageData.totalResult = res.total
          this.tableLoading = false
        } else {
          this.tableData = []
          this.pageData.totalResult = 0
          this.tableLoading = false
        }
      })
    },

    pageChange(currentPage, pageSize) {
      this.pageData.currentPage = currentPage
      this.pageData.pageSize = pageSize
      this.getTable()
    },
    //搜索
    searchChange(val){
      // console.log(val);
      this.likeEbsName = val.target.value
    },
    selectSearch(data) {
      // console.log(data)
      // console.log(111);
      
      // this.likeEbsName = data
      this.pageData.currentPage=1
      this.getTable()
    },
    //类型搜索
    selectChange(value) {
      console.log(`selected ${value}`)
    },
    //详情

    tableDetail(val) {
      // console.log(val);
      // this.wbsName = val.wbsName
      // this.wbsId = val.wbsId
      // this.orgId = val.orgId
      // this.projectId = val.projectId
      // this.visibleDrawer = true
      // this.detailLoading = true
      // this.getConfigData()
    },
    onClose(data) {
      this.visibleDrawer = data
    },
    clickDrop(val) {
      this.dropName = val
    },

    //获取施工列表
    getUnitList() {
      let data = {
        userId: this.$store.state.userInfo.id
      }
      this.defaultUnitFlag = false
      getManageByUserId(data).then((res) => {
        // console.log(res);
        if (res.data.length > 0) {
          this.unitList = res.data
          this.defaultUnit = []
          this.defaultUnit.push(this.unitList[0].id)
          this.defaultUnitFlag = true
          this.orgId = this.unitList[0].id
          // console.log(this.orgId)

          this.getTree()
        }
      })
    },
    //改变单位时
    selectUnitChange(value) {
      this.orgId = value
      this.getTree()
    },
    getTree() {
      //wbs树
      this.treeLoading = true
      wbsTreeByOrgId({
        orgId: this.orgId
      }).then((res) => {
        if (res.code == 200) {
          if (res.data.length>0) {
          this.treeData = XEUtils.mapTree(res.data, (item) => {
            let disabledFlag = false
            if (item.optional == 0) {
              disabledFlag = true
            }
            return {
              ...item,
              key: item.id,
              title: item.name+'（'+item.ebsTotalCount+'）',
              disabled: disabledFlag
            }
          })
          this.defaultSelectKeys = []
          this.defaultSelectKeys.push(this.treeData[0].id)
          this.frontWbsId = this.treeData[0].id
          this.getTable()
          this.treeLoading = false
          }else{
          this.treeLoading = false
          this.loading = false
        }
        }
      })
    },

    treeKey(val) {
      this.frontWbsId = val
      this.getTable()
      // console.log(this.parentWbsId);
      // this.getChildList()
    }
  }
}
</script>

<style lang="less" scoped>
.leftDiv{
  height: calc(100vh - 165px);
}
.treeDiv {
  height: calc(100vh - 197px);
  overflow-y: auto;
  overflow-x: auto;
}

.rightTitle {
  font-size: 18px;
  margin-left: 15px;
  color: #202d40;
  font-weight: bold;
}
// ::-webkit-scrollbar {
//   width: 5px;
// }
::-webkit-scrollbar {
  width: 7px;
  height: 7px;
  /**/
}
::-webkit-scrollbar-track {
  background: #f8f8f8;
  border-radius: 4px;
}
::-webkit-scrollbar-thumb {
  background: #ddd;
  border-radius: 4px;
}
.margin-bt15 {
  margin-bottom: 15px;
}
.selectDiv {
  background: #fcfcfc;
  padding: 8px 16px;
  border-top: 1px solid #f0f0f0;
  border-bottom: 1px solid #f0f0f0;
  white-space: nowrap;
}
.selectDivBottom {
  background: #f7f9fc;
  height: 7px;
}
.tableDiv {
  height: calc(100vh - 220px);
}
.selectType {
  // width: 100px;
  // padding: 5px;
  color: rgba(32, 45, 64, 0.6);
  cursor: pointer;
  background: #fcfcfc;
}
.backgroundBlue {
  background: #e6f7ff;
}
.dropdownClass {
  padding: 5px 5px;
}
.dropdownClass:hover {
  background: #f2f4f6;
  // color: #fff;
}
.dropdownClass:hover .selectType {
  background: #f2f4f6;
  //  color: #fff;
}
</style>

